<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
</head>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<body>
<div id="loginForm">
    <form @submit.prevent="handleLogin">
        <div>
            <label for="username">Username:</label>
            <input type="text" id="username" v-model="username" required>
        </div>
        <div>
            <label for="password">Password:</label>
            <input type="password" id="password" v-model="password" required>
        </div>
        <button type="submit">Login</button>
    </form>
</div>

<script>
    const { createApp } = Vue;

    createApp({
        data() {
            return {
                username: '',
                password: ''
            }
        },

        methods: {
            handleLogin() {
                // Implement login logic here
                console.log("Logging in with", this.username, this.password);

                
                // For example, send a request to your server
            }
        }
    }).mount('#loginForm');
</script>
</body>
</html>